<template>
	<div class="bg">


		<goback></goback>

		<div class="card">
			<div class="Title">
				<img :src="require(`@/assets/business/工牌.png`)" alt="" />
				企业卡片
			</div>
			<div class="introduce">
				<div class="text">企业实名：{{shop.user.name}}</div>
				<div class="text">企业等级：[ Lv.{{shop.user.level}} ]</div>
				<div class="text">企业积分：{{shop.user.score}} 枚</div>
				<div class="text">注册地址：{{shop.user.address}}</div>
				<div class="text">注册时间： {{formatDate(shop.timestamp)}}</div>
			</div>
		</div>


		<div class="card">
			<div class="Title"><img :src="require(`@/assets/business/图表.png`)" alt="" />商品介绍</div>
			<div>{{shop.description}}</div>
		</div>



		<div class="card">
			<div class="Title"><img :src="require(`@/assets/business/收据发票.png`)" alt="" />回收详情</div>
			<table border="1" cellspacing="1">
				<tr>
					<th>秸秆类型</th>
					<th>需求数量(千克)</th>
					<th>预期价格(每千克)</th>
				</tr>
				<tr v-for="(item,index) in shop.buys">
					<td>{{item.name}}</td>
					<td>{{item.amount}}</td>
					<td>{{item.price}}</td>
				</tr>
			</table>
		</div>



		<div class="card">
			<div class="Title"><img :src="require(`@/assets/business/培育成长.png`)" alt="" />交易流程</div>

			<div v-if="shop.type=='OnlySelf' || shop.type=='ALL'">
				<div class="trade_sub_title" >自送上门</div>
				<div class="trade_container">
					<div class="trade_container_item">
				
						<div class="trade_container_left">
							<img :src="require(`@/assets/trade/合同签订.png`)" alt="" />
							<img class="trade_container_left_icon" :src="require(`@/assets/icons/箭头.png`)"></img>
						</div>
				
						<div>用户下单</div>
					</div>
					<div class="trade_container_item">
						<div class="trade_container_left">
							<img :src="require(`@/assets/trade/建设整改.png`)" alt="" />
							<img class="trade_container_left_icon" :src="require(`@/assets/icons/箭头.png`)"></img>
						</div>
						<div>自行送货</div>
					</div>
					<div class="trade_container_item">
						<div class="trade_container_left">
							<img :src="require(`@/assets/trade/项目准备.png`)" alt="" />
							<img class="trade_container_left_icon" :src="require(`@/assets/icons/箭头.png`)"></img>
						</div>
						<div>我已发货</div>
					</div>
					<div class="trade_container_item">
						<div class="trade_container_left">
							<img :src="require(`@/assets/trade/评估分析.png`)" alt="" />
							<img class="trade_container_left_icon" :src="require(`@/assets/icons/箭头.png`)"></img>
						</div>
						<div>企业确认</div>
					</div>
					<div class="trade_container_item">
						<div class="trade_container_left">
							<img :src="require(`@/assets/trade/结项回款.png`)" alt="" />
						</div>
						<div>订单完成</div>
					</div>
				</div>
			</div>
			
			<div v-if="shop.type=='OnlyYourself' || shop.type=='ALL'">
				<div class="trade_sub_title">企业上门</div>
				<div class="trade_container">
					<div class="trade_container_item">
						<div class="trade_container_left">
							<img :src="require(`@/assets/trade/合同签订.png`)" alt="" />
							<img class="trade_container_left_icon" :src="require(`@/assets/icons/箭头.png`)"></img>
						</div>
						<div>用户下单</div>
					</div>
					<div class="trade_container_item">
						<div class="trade_container_left">
							<img :src="require(`@/assets/trade/现场测评.png`)" alt="" />
							<img class="trade_container_left_icon" :src="require(`@/assets/icons/箭头.png`)"></img>
						</div>
				
						<div>上门回收</div>
					</div>
					<div class="trade_container_item">
						<div class="trade_container_left">
							<img :src="require(`@/assets/trade/项目准备.png`)" alt="" />
							<img class="trade_container_left_icon" :src="require(`@/assets/icons/箭头.png`)"></img>
						</div>
				
						<div>我已发货</div>
					</div>
					<div class="trade_container_item">
						<div class="trade_container_left">
							<img :src="require(`@/assets/trade/评估分析.png`)" alt="" />
							<img class="trade_container_left_icon" :src="require(`@/assets/icons/箭头.png`)"></img>
						</div>
						<div>企业确认</div>
					</div>
					<div class="trade_container_item">
						<div class="trade_container_left">
							<img :src="require(`@/assets/trade/结项回款.png`)" alt="" />
						</div>
						<div>订单完成</div>
					</div>
				</div>
			</div>

		</div>

		<div class="card">
			<div class="Title"><img :src="require(`@/assets/business/公司.png`)" alt="" />企业资料</div>
			<div class="seller_card">

				<div class="top_box">
					<img class="seller_card_img" :src="this.shop.src"></img>
					<div class="right_box">
						<div>{{shop.user.name}} Lv.{{shop.user.level}}级</div>
						<div>{{shop.description}}</div>
					</div>
				</div>

				<div class="NavInfo">
					<div class="NavInfo_item">
						<div>交易量</div>
						<div>{{shop.has_done_orders}}单</div>
					</div>
					<div class="NavInfo_item">
						<div>累计回收</div>
						<div>{{shop.has_get}} KG</div>
					</div>
					<div class="NavInfo_item">
						<div>发布时间</div>
						<div>{{daysSinceTimestamp(shop.timestamp)}}天</div>
					</div>
				</div>

			</div>
		</div>

		
		<div class="card" v-if="shop.collect_ways != null && shop.collect_ways.length>0">
			<div class="Title"><img :src="require(`@/assets/business/营销市场.png`)" alt="" />Ta常用于</div>
			<div class="use_box">
				<div class="use_box_item" v-for="(item,index) in shop.collect_ways">{{item}}</div>
			</div>
		</div>


		<div class="bottomNav">
			
			<div class="bottomNav_item" @click="$router.push('/userInfo?uid='+shop.uid)">
				<img :src="require(`@/assets/icons/店铺.png`)" alt="" />
				店铺
			</div>

			
			<div class="bottomNav_item"  @click="$router.push('/message?uid='+shop.uid)">
				<img :src="require(`@/assets/icons/私信.png`)" alt="" />
				私信
			</div>
			
			<button class="bottomNav_button_1" @click="callup">电话联系Ta</button>
			<button class="bottomNav_button_2" @click="openBuyModal">立即出售</button>
		</div>
		
		<BuyModal ref="BuyModal" :shopData="shop" @form-submitted="handleFormSubmitted" /> 

		<div class="placeblock"></div>
	</div>
</template>

<script>
	import BuyModal from '@/components/BuyModal.vue'; // 引入弹窗组件  
	export default {
		name: "detail",
		props: ['stationID'],
		data() {
			return {
				shopID: null,
				shop: {
					uid:null,
					buys:[],
					description:null,
					has_get:null,
					timestamp:null,
					user:{
						uid:null,
						name:null,
						score:null,
						level:null
					}
				},
				
				

			};
		},
		mounted() {
			this.shopID=this.$route.query.shopid;
			this.getData();
		},
		methods: {
			callup(){
				window.location.href = 'tel://' + this.shop.user.telephone
			},
			msg(){
			this.$router.push('/message?uid='+this.shopID);
			},
			daysSinceTimestamp(timestamp) {  
			      // 创建一个Date对象表示当前的日期和时间  
			      const now = new Date();  
			        
			      // 创建一个Date对象表示给定的timestamp  
			      const then = new Date(timestamp); // 注意：timestamp通常是秒为单位，需要转换为毫秒  
			        
			      // 计算两个日期之间的毫秒差  
			      const diff = now - then;  
			        
			      // 将毫秒差转换为天  
			      const days = Math.ceil(diff / (1000 * 60 * 60 * 24)); // 一天有 1000毫秒 * 60秒 * 60分钟 * 24小时  
			        
			      return days;  
			    },
			formatDate(timestamp) {
				const date = new Date(timestamp); // JavaScript时间戳是以毫秒为单位的，所以需要乘以1000  
				const year = date.getFullYear();
				const month = this.padZero(date.getMonth() + 1); // getMonth()返回的月份是从0开始的，所以需要加1  
				const day = this.padZero(date.getDate());
				const hour = this.padZero(date.getHours());
				const minutes = this.padZero(date.getMinutes());
				return `${year}年${month}月${day}日`;
			},
			padZero(num) {
				return num < 10 ? '0' + num : num;
			},
			getSrc(){
				let url = `${this.IP}/shop_head/${this.shopID}.jpg`
				this.axios.head(url).then(res => {
					 if (res.status == 200) {  
					        this.shop.src=url;
							this.$forceUpdate();
					    }
						this.$forceUpdate();
				}).catch(error => {
					// 处理错误  
					  this.shop.src = `${this.IP}/shop_head/normal.jpg`
					this.$forceUpdate();
				});;;
			},
			getData(){
				this.axios.get(`${this.IP}/get_shop`, {
					params:{
						uid: this.shopID
					}
				}).then(res => {
					console.log(res.data);
					this.shop=res.data;
					this.shop.buys.forEach((e)=>{
						e.amountqj = [parseFloat(e.amount).toFixed(0),(parseFloat(e.amount)/2).toFixed(0),(parseFloat(e.amount)/3).toFixed(0),(parseFloat(e.amount)/5).toFixed(0)];
					})
					this.getSrc();
				}).catch(error => {
					// 处理错误  
					console.error('请求出错：', error);
				});;
			},
			openBuyModal(){
				if(this.$store.getters.getUser.position){
					this.$toast.showMessage("您是企业身份，无法下单！");
				}else{
					this.$refs.BuyModal.openModal(); // 打开弹窗
				}
			},
			 handleFormSubmitted(formData) {  
			      // 处理表单提交后的逻辑，比如发送到服务器等  
			      console.log(formData);  
			    },  
		},
		  components: {  
		    BuyModal,  
		  },  
	}
</script>

<style scoped>
	.bottomNav {
		position: fixed;
		width: 100vw;
		background-color: #f7f8fa;
		bottom: 0px;
		right: 0px;
		display: flex;
		justify-content: flex-start;
		z-index:10;
	}
	
	
	.bottomNav_item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 6vw 0 5vw;
	}
	
	.bottomNav_item+.bottomNav_item{
		margin-right:16vw;
	}
	
	.bottomNav_item img{
		width: 48px;
		height: 48px;
	}

	.bottomNav button{
		padding: 2.5vw 5vw;
		border: none;
		border-radius: 0 5px 5px 0;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s ease;
		border-radius: 3em;
		margin-right:3vw;
	}
	
	

	.bottomNav_button_1{
		height: 10vw;
		margin: auto 0;
		font-size: 3vw;
		background-color: #fa2c19;
	}
	
	.bottomNav_button_2{
		height: 10vw;
		margin: auto 0;
		font-size: 3vw;
		background-color: #ffb30d !important;
	}
	

	table {
		border-collapse: collapse;
		width: 90vw;
		text-align: center;
		margin: 0 auto;
		height: 25vh;
	}

	.seller_card {

		padding: 20px;
		display: flex;
		flex-direction: column;
	}

	.seller_card_img {
		width: 12vw;
		height: 12vw;
		border: 1px solid #ebebeb;
		border-radius: 50%;
	}

	.right_box {
		padding-left: 40px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.top_box {
		display: flex;
		flex-direction: row;
	}

	.NavInfo {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		background-color: #e3e3e3;
		border-radius: 3vw;
		margin-top: 4vw;
	}

	.NavInfo_item {
		display: flex;
		flex-direction: column;
		text-align: center;
		margin: 1vw;
	}

	.Title {
		display: flex;
		flex-direction: row;
		align-items: center;

		padding-bottom: 16px;
		font-size: 36px;
		margin-bottom: 16px;
		border-bottom: 1px solid #e3e3e3;
	}

	.Title img {
		width: 3vh;
		margin-right: 2vw;
	}

	.trade_container {
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #e3e3e3;
	}

	.trade_container_item {
		display: flex;
		flex-direction: column;
		width: 14vw;
		padding: 2vw;
		justify-content: space-around;

		flex-wrap: nowrap;
	}

	.trade_container_left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.trade_container_item img {
		width: 86px;
		height: 86px;
	}

	.trade_container_left_icon {
		width: 43px !important;
		height: 43px !important;
	}

	.trade_sub_title {
		padding: 2vw;
		font-size: 32px;
	}

	.use_box {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.use_box_item {
		min-width: 17vw;
		border: 1px solid #ebebeb;
		border-radius: 2em;
		padding: 1vw;
		margin: 1vw;
		text-align: center;
		font-weight: bold;

		background-color: #fee;
		/* 淡红色背景 */
		color: #ffa500;
		/* 橙色文字 */
		transition: all 0.3s ease;
		/* 平滑的过渡效果 */
	}

	.use_box_item:hover {
		background-color: #ffd700;
		/* 鼠标悬停时的背景色，稍深的橙色 */
		color: white;
		/* 鼠标悬停时的文字颜色 */
	}
	

</style>